<!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="vue-router简介生活中的路由   开发中的路由  以前传统的多页面应用需要反复的跳转   表现在页面上就是不停的闪动  而单页面应用则通过路由实现展示   路由就是 key value映射 前端路由 key是路径 value就是组件 后端路由 key是路径  value就是函数  基本使用 ​	注意  2022年2月份后  vue-router默认已经是vue-router4 只能在vue"><meta property="og:type" content="article"><meta property="og:title" content="vuerouter"><meta property="og:url" content="https://buqingdege.gitee.io/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vuerouter/index.html"><meta property="og:site_name" content="Hexo"><meta property="og:description" content="vue-router简介生活中的路由   开发中的路由  以前传统的多页面应用需要反复的跳转   表现在页面上就是不停的闪动  而单页面应用则通过路由实现展示   路由就是 key value映射 前端路由 key是路径 value就是组件 后端路由 key是路径  value就是函数  基本使用 ​	注意  2022年2月份后  vue-router默认已经是vue-router4 只能在vue"><meta property="og:locale"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="article:published_time" content="2023-10-08T16:50:10.500Z"><meta property="article:modified_time" content="2023-10-08T16:50:10.504Z"><meta property="article:author" content="buqingdege"><meta property="article:tag" content="vue2"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><title>vuerouter</title><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="16x16"><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="32x32"><link rel="stylesheet" href="/xujianhu/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.css"><link rel="stylesheet" href="/xujianhu/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"buqingdege.gitee.io",author:"buqingdege",root:"/xujianhu/",typed_text:["buqingdege"],theme_version:"2.1.2",theme:{switch:!0,default:"style-light"},favicon:{logo:"/img/favicon.svg",icon16:"/img/favicon.svg",icon32:"/img/favicon.svg",appleTouchIcon:null,webmanifest:null,visibilitychange:!1,hidden:"/failure.ico",showText:"(/≧▽≦/)咦！又好了！",hideText:"(●—●)喔哟，崩溃啦！"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!1,plugin:{flickr_justified_gallery:"https://unpkg.com/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",user_tag:"fas fa-user-alt",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!1,title:"mac",height_limit:200},toc:{post_title:!1}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2023-10-09 00:50:10"}</script><link data-swup-theme rel="stylesheet" href="/xujianhu/css/index.css?v=2.1.2" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/xujianhu/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/xujianhu/img/favicon.svg"><div class="trm-logo-text">不情<span>的歌</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="/xujianhu/" target="">主页</a></li><li class="menu-item-has-children"><a href="/xujianhu/categories/" target="">分类</a></li><li class="menu-item-has-children"><a href="/xujianhu/archives/" target="">归档</a></li><li class="menu-item-has-children"><a data-no-swup href="/xujianhu/tag/" target="">标签</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"> <label class="trm-swich" for="trm-swich"></label> <i class="iconfont far fa-moon"></i></div></div><form class="site-search-form"><input type="text" id="local-search-input" class="st-search-input" style="margin-bottom:0"></form><div id="local-search-result" class="local-search-result-cls"></div></div><div class="trm-menu-btn"><span></span></div></div></header><link rel="stylesheet" href="css/search.css"><script src="js/jquery.js"></script><script src="js/search.js"></script><script src="js/search_custom.js"></script><div class="trm-content-start"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="/xujianhu/img/banner.png"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font">vuerouter</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/xujianhu/" class="trm-anima-link">Home</a></li><li><span>前端开发</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar" src="/xujianhu/images/logo/avatar.jpg"></div><h5 class="trm-name trm-mb-15">不情的歌</h5><div class="trm-label">I`m <span class="trm-typed-text"></span></div></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="https://github.com" title="github" rel="nofollow" target="_blank"><i class="iconfont fab fa-github"></i> </a><a href="https://gitee.com" title="gitee" rel="nofollow" target="_blank"><i class="iconfont iconfont cg-gitee"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">地址:</div><div class="trm-label trm-label-light">火星</div></li><li><div class="trm-label">年龄:</div><div class="trm-label trm-label-light">25</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:951649211@qq.com" class="trm-btn">联系我 <i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>10/09</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>00:50</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br>buqingdege</div></div></div><div class="trm-card"><article id="article-container" class="trm-publication"><h1 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h1><h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>生活中的路由</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222155839191.webp" alt="image-20221222155839191" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222160149410.webp" alt="image-20221222160149410" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>开发中的路由 以前传统的多页面应用需要反复的跳转 表现在页面上就是不停的闪动 而单页面应用则通过路由实现展示</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222160310691.webp" alt="image-20221222160310691" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222161927141.webp" alt="image-20221222161927141" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>路由就是 key value映射</p><p>前端路由 key是路径 value就是组件</p><p>后端路由 key是路径 value就是函数</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222161850023.webp" alt="image-20221222161850023" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><blockquote><p>​	注意 2022年2月份后 vue-router默认已经是vue-router4 只能在vue3中使用 而vue2 使用的是vue-router3</p></blockquote><ol><li><p>安装vue-router，命令：<code>npm i vue-router</code></p></li><li><p>应用插件：<code>Vue.use(VueRouter)</code></p></li><li><p>编写router配置项:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">main.<span class="property">js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span> <span class="comment">//1.先引入vuerouter</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span> <span class="comment">//实例化一个vuerouter</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">VueRouter</span>) <span class="comment">// 2. 使用vuerouter</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">  router</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入VueRouter</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="comment">//引入Luyou 组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">About</span> <span class="keyword">from</span> <span class="string">&#x27;../components/About&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&#x27;../components/Home&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建router实例对象，去管理一组一组的路由规则</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">	<span class="attr">routes</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:<span class="title class_">About</span></span><br><span class="line">		&#125;,</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:<span class="title class_">Home</span></span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//暴露router</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure></li><li><p>实现切换（active-class可配置激活样式）</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link active-class=&quot;active&quot; to=&quot;/about&quot;&gt;About&lt;/router-link&gt;</span><br><span class="line">//router-link 最终会被编译成a标签</span><br><span class="line"></span><br><span class="line">//给组件添加 active-class 属性 即可添加当组件被激活时的样式 </span><br><span class="line">//to指定链接的目标路由</span><br></pre></td></tr></table></figure></li><li><p>指定展示位置</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure></li></ol><h3 id="注意点1-路由组件放的文件夹"><a href="#注意点1-路由组件放的文件夹" class="headerlink" title="注意点1. 路由组件放的文件夹"></a>注意点1. 路由组件放的文件夹</h3><p>组件可以分类 成路由组件还有普通组件</p><p>路由组件 是router-view给渲染成的 普通组件自己写的</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222195758913.webp" alt="image-20221222195758913" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>路由组件放pages里 普通放components</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222200531986.webp" alt="image-20221222200531986" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>每个组件都有一个$route 属性 存着自己的路径方法等</p><p>每个组件都有一个$router路由器属性 但是是所有组件共用的 每个应用只有一个路由器</p><h3 id="注意点2-路由组件没被激活时是被销毁了而不是display-none了"><a href="#注意点2-路由组件没被激活时是被销毁了而不是display-none了" class="headerlink" title="注意点2.  路由组件没被激活时是被销毁了而不是display:none了"></a>注意点2. 路由组件没被激活时是被销毁了而不是display:none了</h3><h2 id="嵌套（多级）路由"><a href="#嵌套（多级）路由" class="headerlink" title="嵌套（多级）路由"></a>嵌套（多级）路由</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222201224800.webp" alt="image-20221222201224800" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ol><li><p>配置路由规则，使用children配置项：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">routes</span>:[</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">About</span>,</span><br><span class="line">	&#125;,</span><br><span class="line">	&#123;</span><br><span class="line">		<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">		<span class="attr">component</span>:<span class="title class_">Home</span>,</span><br><span class="line">		<span class="attr">children</span>:[ <span class="comment">//通过children配置子级路由</span></span><br><span class="line">			&#123;</span><br><span class="line">				<span class="attr">path</span>:<span class="string">&#x27;news&#x27;</span>, <span class="comment">//此处一定不要写：/news因为底层已经加了</span></span><br><span class="line">				<span class="attr">component</span>:<span class="title class_">News</span></span><br><span class="line">			&#125;,</span><br><span class="line">			&#123;</span><br><span class="line">				<span class="attr">path</span>:<span class="string">&#x27;message&#x27;</span>,<span class="comment">//此处一定不要写：/message</span></span><br><span class="line">				<span class="attr">component</span>:<span class="title class_">Message</span></span><br><span class="line">			&#125;</span><br><span class="line">		]</span><br><span class="line">	&#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure></li><li><p>跳转（要写完整路径）：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to=&quot;/home/news&quot;&gt;News&lt;/router-link&gt;</span><br><span class="line">//此处要带着父级路由的路径</span><br></pre></td></tr></table></figure></li></ol><h2 id="路由query传参"><a href="#路由query传参" class="headerlink" title="路由query传参"></a>路由query传参</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222220333817.webp" alt="image-20221222220333817" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这样的情况 多级路由 我希望我点级消息001就展示消息 这些消息是个列表 数量未知</p><p>这时候 手动的写每一个组件就不现实了 但是我们发现 消息里面 除了消息内容不一样 其他有着共通之处 于是我们就想着通过传参把数据带给一个共通组件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222220913627.webp" alt="image-20221222220913627" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>通过query参数进行传递</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222221035041.webp" alt="image-20221222221035041" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>我们通过 哪里取这个数据呢 这就 要通过 this.$route了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222221250320.webp" alt="image-20221222221250320" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="字符串写法"><a href="#字符串写法" class="headerlink" title="字符串写法"></a>字符串写法</h3><p>可以看见 this.$route 里的 query参数就是 我们的数据</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222221535748.webp" alt="image-20221222221535748" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这是to的字符串写法 还可以写的更简洁 那就是对象写法</p><h3 id="对象写法"><a href="#对象写法" class="headerlink" title="对象写法"></a>对象写法</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222221916058.webp" alt="image-20221222221916058" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ol><li><p>传递参数</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 跳转并携带query参数，to的字符串写法 --&gt;</span><br><span class="line">&lt;router-link :to=&quot;/home/message/detail?id=666&amp;title=你好&quot;&gt;跳转&lt;/router-link&gt;</span><br><span class="line">				</span><br><span class="line">&lt;!-- 跳转并携带query参数，to的对象写法 --&gt;</span><br><span class="line">&lt;router-link </span><br><span class="line">	:to=&quot;&#123;</span><br><span class="line">		path:&#x27;/home/message/detail&#x27;,</span><br><span class="line">		query:&#123;</span><br><span class="line">		   id:666,</span><br><span class="line">            title:&#x27;你好&#x27;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;&quot;</span><br><span class="line">&gt;跳转&lt;/router-link&gt;</span><br></pre></td></tr></table></figure></li><li><p>接收参数：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.<span class="property">query</span>.<span class="property">id</span></span><br><span class="line">$route.<span class="property">query</span>.<span class="property">title</span></span><br></pre></td></tr></table></figure></li></ol><h2 id="命名路由"><a href="#命名路由" class="headerlink" title="命名路由"></a>命名路由</h2><ol><li><p>作用：可以简化路由的跳转。</p></li><li><p>如何使用</p><ol><li><p>给路由命名：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;/demo&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:<span class="title class_">Demo</span>,</span><br><span class="line">	<span class="attr">children</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;test&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:<span class="title class_">Test</span>,</span><br><span class="line">			<span class="attr">children</span>:[</span><br><span class="line">				&#123;</span><br><span class="line">          <span class="attr">name</span>:<span class="string">&#x27;hello&#x27;</span> <span class="comment">//给路由命名</span></span><br><span class="line">					<span class="attr">path</span>:<span class="string">&#x27;welcome&#x27;</span>,</span><br><span class="line">					<span class="attr">component</span>:<span class="title class_">Hello</span>,</span><br><span class="line">				&#125;</span><br><span class="line">			]</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li><li><p>简化跳转：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--简化前，需要写完整的路径 --&gt;</span><br><span class="line">&lt;router-link to=&quot;/demo/test/welcome&quot;&gt;跳转&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--简化后，直接通过名字跳转 --&gt;</span><br><span class="line">&lt;router-link :to=&quot;&#123;name:&#x27;hello&#x27;&#125;&quot;&gt;跳转&lt;/router-link&gt;  //只要是命名路由那就是写对象写法  直接to=&quot;hello&quot; 这是无效的</span><br><span class="line">&lt;!--简化写法配合传递参数 --&gt;</span><br><span class="line">&lt;router-link </span><br><span class="line">	:to=&quot;&#123;</span><br><span class="line">		name:&#x27;hello&#x27;,</span><br><span class="line">		query:&#123;</span><br><span class="line">		   id:666,</span><br><span class="line">            title:&#x27;你好&#x27;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;&quot;</span><br><span class="line">&gt;跳转&lt;/router-link&gt;</span><br></pre></td></tr></table></figure></li></ol></li></ol><p>注意</p><p><img src="C:/Users/xujianhu/AppData/Roaming/Typora/typora-user-images/image-20221222225757081.png" alt="image-20221222225757081" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>直接路由to上写名字 vue不回将其解析成about这个命名的路由 是有问题的 无效的</p><p>只能是这么写 对象写法写name属性</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222225910869.webp" alt="image-20221222225910869" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>也就是对象to写法时写name属性才可以 只要用name 那就是得使用 对象写法</p><p>所以命名 路由适合特别长的嵌套路由 更加方便 简单的路由直接字符串 &#x2F;about这种写法方便</p><h2 id="路由params参数"><a href="#路由params参数" class="headerlink" title="路由params参数"></a>路由params参数</h2><ol><li><p>配置路由，声明接收params参数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:<span class="title class_">Home</span>,</span><br><span class="line">	<span class="attr">children</span>:[</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">path</span>:<span class="string">&#x27;news&#x27;</span>,</span><br><span class="line">			<span class="attr">component</span>:<span class="title class_">News</span></span><br><span class="line">		&#125;,</span><br><span class="line">		&#123;</span><br><span class="line">			<span class="attr">component</span>:<span class="title class_">Message</span>,</span><br><span class="line">			<span class="attr">children</span>:[</span><br><span class="line">				&#123;</span><br><span class="line">					<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">					<span class="attr">path</span>:<span class="string">&#x27;detail/:id/:title&#x27;</span>, <span class="comment">//使用占位符声明接收params参数</span></span><br><span class="line">					<span class="attr">component</span>:<span class="title class_">Detail</span></span><br><span class="line">				&#125;</span><br><span class="line">			]</span><br><span class="line">		&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li><li><p>传递参数</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 跳转并携带params参数，to的字符串写法 --&gt;</span><br><span class="line">&lt;router-link :to=&quot;/home/message/detail/666/你好&quot;&gt;跳转&lt;/router-link&gt;</span><br><span class="line">				</span><br><span class="line">&lt;!-- 跳转并携带params参数，to的对象写法 --&gt;</span><br><span class="line">&lt;router-link </span><br><span class="line">	:to=&quot;&#123;</span><br><span class="line">		name:&#x27;xiangqing&#x27;,</span><br><span class="line">		params:&#123;</span><br><span class="line">		   id:666,</span><br><span class="line">       title:&#x27;你好&#x27;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;&quot;</span><br><span class="line">&gt;跳转&lt;/router-link&gt;</span><br></pre></td></tr></table></figure><blockquote><p>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！</p></blockquote><blockquote><p>​	另外params传递的属性需要与占位符那写的属性是一致的</p></blockquote></li><li><p>接收参数：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.<span class="property">params</span>.<span class="property">id</span></span><br><span class="line">$route.<span class="property">params</span>.<span class="property">title</span></span><br></pre></td></tr></table></figure></li></ol><h3><a href="#" class="headerlink"></a><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222232945466.webp" alt="image-20221222232945466" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></h3><h3 id="配置params可传可不传"><a href="#配置params可传可不传" class="headerlink" title="配置params可传可不传"></a>配置params可传可不传</h3><p>如果路由配置里已经用params参数占位了 那么不传参数就会出错 连着要到的路径都被吞了</p><p>解决办法在params参数占位后面加？ 就可以可传可不传 类似正则 ？ 代表传0次或1次</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224150440513.png" alt="image-20221224150440513" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="params参数可传可不传-如果传的参数值是空串-如何解决"><a href="#params参数可传可不传-如果传的参数值是空串-如何解决" class="headerlink" title="params参数可传可不传 如果传的参数值是空串 如何解决"></a>params参数可传可不传 如果传的参数值是空串 如何解决</h3><p>可传可不传传的是空串 那么路径也会有问题 连要到的路径都吞了</p><p>这个时候使用<code>||undefined</code>解决</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224151030649.png" alt="image-20221224151030649" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="路由的props配置"><a href="#路由的props配置" class="headerlink" title="路由的props配置"></a>路由的props配置</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222233153930.webp" alt="image-20221222233153930" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>有没有觉得在模板里写这么多明晃晃的route点很麻烦？</p><p>​	作用：让路由组件更方便的收到参数</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">	<span class="attr">path</span>:<span class="string">&#x27;detail/:id&#x27;</span>,</span><br><span class="line">	<span class="attr">component</span>:<span class="title class_">Detail</span>,</span><br><span class="line"></span><br><span class="line">	<span class="comment">//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 但是一般不用  所有的参数值都将变为这个</span></span><br><span class="line">	<span class="comment">// props:&#123;a:900&#125;</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件 这种方式只支持params方式</span></span><br><span class="line">	<span class="comment">// props:true</span></span><br><span class="line">	</span><br><span class="line">	<span class="comment">//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件</span></span><br><span class="line">	<span class="title function_">props</span>(<span class="params">route</span>)&#123;</span><br><span class="line">		<span class="keyword">return</span> &#123;</span><br><span class="line">			<span class="attr">id</span>:route.<span class="property">query</span>.<span class="property">id</span>,</span><br><span class="line">			<span class="attr">title</span>:route.<span class="property">query</span>.<span class="property">title</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>直接就可以在组件中使用 props属性接收这个路由传来的props</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223000117707.webp" alt="image-20221223000117707" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>第三种也可以通过二次解构的形式更简洁</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223001904814.webp" alt="image-20221223001904814" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="router-link的repace属性"><a href="#router-link的repace属性" class="headerlink" title="router-link的repace属性"></a>router-link的repace属性</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223003743434.webp" alt="image-20221223003743434" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>浏览器后退前进是用历史记录实现的 历史记录是个栈结构 前进后退是操作指针 不破坏每一条的记录 这种模式叫做<b>push模式</b> vue-router默认就是push模式</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223004029642.webp" alt="image-20221223004029642" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>还有一种模式 叫做 <b>replace </b>&gt; 模式 替换模式 每前进一次 就 干掉上一步的记录</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223004321556.webp" alt="image-20221223004321556" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>router-link 默认就是push 模式 可以开启 replace模式</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223004502770.webp" alt="image-20221223004502770" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223004514657.webp" alt="image-20221223004514657" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="-1"><a href="#-1" class="headerlink"></a></h3><ol><li>作用：控制路由跳转时操作浏览器历史记录的模式</li><li>浏览器的历史记录有两种写入方式：分别为<code>push</code>和<code>replace</code>，<code>push</code>是追加历史记录，<code>replace</code>是替换当前记录。路由跳转时候默认为<code>push</code></li><li>如何开启<code>replace</code>模式：<code>&lt;router-link replace .......&gt;News&lt;/router-link&gt;</code></li></ol><h2 id="编程式路由导航（不用router-link）"><a href="#编程式路由导航（不用router-link）" class="headerlink" title="编程式路由导航（不用router-link）"></a>编程式路由导航（不用router-link）</h2><p>前面我们想要实现路由的跳转必须依靠router-link router-link 最终编译出来的是一个a标签 这不方便我们的开发 假如我们是按钮导航呢？</p><p>this.$router路由器 的构造函数的原型对象上提供了 很多方便的API</p><ol><li><p>作用：不借助<code>&lt;router-link&gt;</code>实现路由跳转，让路由跳转更加灵活</p></li><li><p>具体编码：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$router的两个API  都和router-link to传入的参数设计是一样的 to里能写啥 这里就能写啥</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123;</span><br><span class="line">  <span class="comment">//浏览器push方式</span></span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">		<span class="attr">params</span>:&#123;</span><br><span class="line">			<span class="attr">id</span>:xxx,</span><br><span class="line">			<span class="attr">title</span>:xxx</span><br><span class="line">		&#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">replace</span>(&#123;</span><br><span class="line">  	<span class="comment">//浏览器repalce方式</span></span><br><span class="line">	<span class="attr">name</span>:<span class="string">&#x27;xiangqing&#x27;</span>,</span><br><span class="line">		<span class="attr">params</span>:&#123;</span><br><span class="line">			<span class="attr">id</span>:xxx,</span><br><span class="line">			<span class="attr">title</span>:xxx</span><br><span class="line">		&#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">forward</span>() <span class="comment">//前进   有浏览器历史  记录的情况下</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">back</span>() <span class="comment">//后退</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">go</span>() <span class="comment">//可前进也可后退 go 函数传入可正可负的参数</span></span><br><span class="line">									<span class="comment">//例如 go(-3) 就是倒退三步路由  go(3) 就是前进3</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">&#x27;/home&#x27;</span>)</span><br></pre></td></tr></table></figure></li></ol><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223012422309.webp" alt="image-20221223012422309" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="push-和-replace重写解决跳转当前路由（参数不变）-多次执行抛出navigationDuplicated-警告"><a href="#push-和-replace重写解决跳转当前路由（参数不变）-多次执行抛出navigationDuplicated-警告" class="headerlink" title="push 和 replace重写解决跳转当前路由（参数不变） 多次执行抛出navigationDuplicated 警告"></a>push 和 replace重写解决跳转当前路由（参数不变） 多次执行抛出navigationDuplicated 警告</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224170411007.png" alt="image-20221224170411007" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/asd.gif" alt="asd" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>多次使用编程式导航 传递的一样的参数 push replace路由跳转 就会报错navigationDuplicated（导航重复） 的错误 这一点声明式router-link 不会出现</p><p>造成的原因是push repalce 执行完毕的返回值是一个promise对象 没有给他传resolve reject 也就不能处理出错 所以</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123;<span class="attr">name</span>:<span class="string">&#x27;search&#x27;</span>,<span class="attr">params</span>:&#123;<span class="attr">keyword</span>:<span class="variable language_">this</span>.<span class="property">keyword</span>&#125;&#125;,<span class="function">()=&gt;</span>&#123;&#125;,<span class="function">()=&gt;</span>&#123;&#125;)</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224171906843.png" alt="image-20221224171906843" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这样就解决了单词多次重复相同数据路由的错误</p><p>但这样只能解决一次 我们可以一劳永逸的解决 改写push replace</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//解决用户路由传入多次重复重复数据问题</span></span><br><span class="line"><span class="keyword">const</span> originPush=<span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">push</span>  <span class="comment">//拿到原先原型上的push方法</span></span><br><span class="line"><span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">push</span>=<span class="keyword">function</span>(<span class="params">location,resolve,reject</span>)&#123;</span><br><span class="line">	<span class="keyword">if</span>(resolve&amp;&amp;reject)&#123;</span><br><span class="line">		originPush.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,resolve,reject)  <span class="comment">//如果用户传入了resolve reject 那就执行用户指定的</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		originPush.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,<span class="function">()=&gt;</span>&#123;&#125;,<span class="function">()=&gt;</span>&#123;&#125;) <span class="comment">//如果用户没有传入resolve reject 那就执行默认的</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> originReplace=<span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">replace</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">replace</span>=<span class="keyword">function</span>(<span class="params">location,resolve,reject</span>)&#123;</span><br><span class="line">	<span class="keyword">if</span>(resolve&amp;&amp;reject)&#123;</span><br><span class="line">		originRplace.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,resolve,reject)  <span class="comment">//如果用户传入了resolve reject 那就执行用户指定的</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		originRplace.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,<span class="function">()=&gt;</span>&#123;&#125;,<span class="function">()=&gt;</span>&#123;&#125;) <span class="comment">//如果用户没有传入resolve reject 那就执行默认的</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="缓存路由组件"><a href="#缓存路由组件" class="headerlink" title="缓存路由组件"></a>缓存路由组件</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223014800220.webp" alt="image-20221223014800220" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>由于路由组件切换会导致组件销毁 用户输入的数据就消失了 我们可以缓存不卸载销毁组件</p><p>只需要给展示这个组件的地方套上 keep-alive</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223020408518.webp" alt="image-20221223020408518" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>keepalive 什么属性都不写 那么就缓存所有组件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223020502569.webp" alt="image-20221223020502569" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>keepalive include 属性里写组件名 就是缓存哪个组件 注意是组件名 不是路径名</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223020640274.webp" alt="image-20221223020640274" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223020702815.webp" alt="image-20221223020702815" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>如果想要缓存多个而不是缓存所有那么可以传入一个数组</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223020857406.webp" alt="image-20221223020857406" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><ol><li><p>作用：让不展示的路由组件保持挂载，不被销毁。</p></li><li><p>具体编码：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;keep-alive include=&quot;News&quot;&gt; </span><br><span class="line">    &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;/keep-alive&gt;</span><br></pre></td></tr></table></figure></li></ol><h3 id="-2"><a href="#-2" class="headerlink"></a></h3><h2 id="新增的两个路由生命周期和-nextick生命周期钩子"><a href="#新增的两个路由生命周期和-nextick生命周期钩子" class="headerlink" title="新增的两个路由生命周期和 nextick生命周期钩子"></a>新增的两个路由生命周期和 nextick生命周期钩子</h2><ol><li>作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。</li><li>具体名字：<ol><li><code>activated</code>路由组件被激活时触发。</li><li><code>deactivated</code>路由组件失活时触发。</li></ol></li></ol><p>场景 我们想给缓存的组件添加一个定时器函数 在他销毁时我们要关掉定时器来节省性能 以前呢 我们想要实现这个需求只需要mouted 挂载定时器 beforeDestroy 关掉定时器即可 但是 一但我们缓存了组件 那么组件就不再销毁 为此 vuerouter提功了两个 新生命周期函数</p><ol><li><code>activated</code>路由组件被激活时触发。</li><li><code>deactivated</code>路由组件失活时触发。</li></ol><p>除此以外 我们还有一个生命周期函数之前用过 那就是 this.nextTick() 生命周期函数 作用是真实dom插入页面后调用的钩子</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/sdassafas.gif" alt="sdassafas" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  //以前的写法</span></span><br><span class="line"><span class="comment">   mounted()&#123;</span></span><br><span class="line"><span class="comment">    this.timer=setInterval(() =&gt; &#123;</span></span><br><span class="line"><span class="comment">      console.log(&#x27;@&#x27;);</span></span><br><span class="line"><span class="comment">      </span></span><br><span class="line"><span class="comment">        this.opacity.opacity-=0.03</span></span><br><span class="line"><span class="comment">        if(this.opacity.opacity&lt;=0) this.opacity.opacity=1</span></span><br><span class="line"><span class="comment">    &#125;, 76);</span></span><br><span class="line"><span class="comment">  &#125;,</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  beforeDestroy()&#123;</span></span><br><span class="line"><span class="comment">    console.log(&#x27;News即将销毁&#x27;);</span></span><br><span class="line"><span class="comment">    clearInterval(this.timer) </span></span><br><span class="line"><span class="comment">  &#125; </span></span><br><span class="line"><span class="comment">  </span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"></span><br><span class="line">  <span class="title function_">activated</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">timer</span>=<span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;@&#x27;</span>);</span><br><span class="line">      </span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">opacity</span>.<span class="property">opacity</span>-=<span class="number">0.03</span></span><br><span class="line">        <span class="keyword">if</span>(<span class="variable language_">this</span>.<span class="property">opacity</span>.<span class="property">opacity</span>&lt;=<span class="number">0</span>) <span class="variable language_">this</span>.<span class="property">opacity</span>.<span class="property">opacity</span>=<span class="number">1</span></span><br><span class="line">    &#125;, <span class="number">76</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">deactivated</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="built_in">clearInterval</span>(<span class="variable language_">this</span>.<span class="property">timer</span>) </span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><h2 id="路由守卫"><a href="#路由守卫" class="headerlink" title="路由守卫"></a>路由守卫</h2><h3 id="前置全局路由守卫"><a href="#前置全局路由守卫" class="headerlink" title="前置全局路由守卫"></a>前置全局路由守卫</h3><p>&#x2F;&#x2F;初始化时被调用 每次路由跳转前调用</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">/router/index.js</span><br><span class="line"></span><br><span class="line">router.beforeEach((to,from,next)=&gt;&#123;</span><br><span class="line">	console.log(to); //to 要去哪里</span><br><span class="line">	console.log(from);  //从哪跳转到这的</span><br><span class="line">	next()  //放行</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223160901418.png" alt="image-20221223160901418" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223160934951.png" alt="image-20221223160934951" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to,<span class="keyword">from</span>,next</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(to); <span class="comment">//to 要去哪里</span></span><br><span class="line">	<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">from</span>);  <span class="comment">//从哪跳转到这的</span></span><br><span class="line"></span><br><span class="line">	<span class="keyword">if</span>(to.<span class="property">name</span>===<span class="string">&#x27;message&#x27;</span>||to.<span class="property">name</span>===<span class="string">&#x27;news&#x27;</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;xuexiao&#x27;</span>)===<span class="string">&#x27;atguigu&#x27;</span>)&#123;</span><br><span class="line">			<span class="title function_">next</span>()</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="title function_">alert</span>(<span class="string">&#x27;学校名不对无权查看&#x27;</span>)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="title function_">next</span>()  <span class="comment">//放行</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>上述代码的if(to.name&#x3D;&#x3D;&#x3D;’message’||to.name&#x3D;&#x3D;&#x3D;’news’)…</p><p>一个一个判断是不是太麻烦了呢</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223162103651.png" alt="image-20221223162103651" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223162252977.png" alt="image-20221223162252977" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>谁需要权限的校验就给谁添加</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223162407891.png" alt="image-20221223162407891" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113170140494.png" alt="image-20230113170140494" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="后置全局路由守卫"><a href="#后置全局路由守卫" class="headerlink" title="后置全局路由守卫"></a>后置全局路由守卫</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：</span><br><span class="line"></span><br><span class="line">router.afterEach((to, from) =&gt; &#123;</span><br><span class="line">  // ...</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>&#x2F;&#x2F;初始化时调用 每次路由切换之后调用 没有next()放行</p><p>使用场景 比如说我想要每次点击进组件 修改文档标题 如果使用前置路由守卫 逻辑会很麻烦 这时使用后置路由守卫就很方便</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223163828223.png" alt="image-20221223163828223" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="独享路由守卫"><a href="#独享路由守卫" class="headerlink" title="独享路由守卫"></a>独享路由守卫</h3><p>独享路由守卫有点像皇帝门口的守卫 只有守卫允许才能进入皇帝寝宫</p><p>使用场景比如说支付页面 必须从订单页进入支付成功页面 这个时候支付页面就能判断是否是订单页面进入的</p><p>独享路由守卫就是某个路由所独享的守卫 只有前置路由 没有后置路由 因为 全局后置路由包括这个路由</p><p>api 是某个路由的路由配置中的 beforeEnter(to,from,next)</p><p>里面的写的内容和全局前置路由是一样的</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">beforeEnter(to,from,next)&#123;</span><br><span class="line">	console.log(&#x27;beforeEnter&#x27;,to,from)</span><br><span class="line">	if(to.meta.isAuth)&#123; //判断当前路由是否需要进行权限控制</span><br><span class="line">		if(localStorage.getItem(&#x27;school&#x27;) === &#x27;atguigu&#x27;)&#123;</span><br><span class="line">			next()</span><br><span class="line">		&#125;else&#123;</span><br><span class="line">			alert(&#x27;暂无权限查看&#x27;)</span><br><span class="line">			// next(&#123;name:&#x27;guanyu&#x27;&#125;)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;else&#123;</span><br><span class="line">		next()</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223170517299.png" alt="image-20221223170517299" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="组件内路由守卫"><a href="#组件内路由守卫" class="headerlink" title="组件内路由守卫"></a>组件内路由守卫</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113234528058.png" alt="image-20230113234528058" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//进入守卫：通过路由规则，进入该组件时被调用</span></span><br><span class="line">beforeRouteEnter (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">//离开守卫：通过路由规则，离开该组件时被调用</span></span><br><span class="line">beforeRouteLeave (to, <span class="keyword">from</span>, next) &#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">beforeRouteUpdata</span>()</span><br></pre></td></tr></table></figure><p>注意组件内before路由守卫是没挂载组件进入组件前 不能获取组件实例</p><p>beforeRouteUpdata()这里是说 比如商品详情页面 通过params参数占位了 不同参数展示不同商品 这里挂载的是同一个组件 一直被复用 这里触发这个钩子</p><p>before leave守卫 路由离开组件时触发 这时可以访问组件实例this</p><p>组件内前后守卫和全局前后置守卫的区别 后置不是进入后立即执行的 而是通过路由离开组件时</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223171746093.png" alt="image-20221223171746093" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>注意是 通过路由进入组件 而不是进入组件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223172053815.png" alt="image-20221223172053815" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223172724980.png" alt="image-20221223172724980" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="路由history和hash模式"><a href="#路由history和hash模式" class="headerlink" title="路由history和hash模式"></a>路由history和hash模式</h2><p>hash模式 hash值不会随着请求发给服务器 默认模式</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223174846197.png" alt="image-20221223174846197" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>#&#x2F;后面的都不会发给服务器</p><p>history模式 路径后面的都会发给服务器作为请求路径</p><ol><li>对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。</li><li>hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。</li><li>hash模式：<ol><li>地址中永远带着#号，不美观 。</li><li>若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。</li><li>兼容性较好。</li></ol></li><li>history模式：<ol><li>地址干净，美观 。</li><li>兼容性和hash模式相比略差。</li><li>应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。</li></ol></li></ol><h3 id="更改vue-hash-和history模式"><a href="#更改vue-hash-和history模式" class="headerlink" title="更改vue hash 和history模式"></a>更改vue hash 和history模式</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223181219232.png" alt="image-20221223181219232" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="node解决history模式刷新404"><a href="#node解决history模式刷新404" class="headerlink" title="node解决history模式刷新404"></a>node解决history模式刷新404</h3><p>1.正则匹配区分前端路由和后端路由</p><p>2.使用第三方库</p><p>node:</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install --save connect-history-api-fallback</span><br></pre></td></tr></table></figure><p>import</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var history = require(&#x27;connect-history-api-fallback&#x27;);</span><br></pre></td></tr></table></figure><p>use middleware</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var express = require(&#x27;express&#x27;);</span><br><span class="line"></span><br><span class="line">var app = express();</span><br><span class="line">app.use(history());</span><br></pre></td></tr></table></figure><h2 id="ui组件库"><a href="#ui组件库" class="headerlink" title="ui组件库"></a>ui组件库</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223222027964.png" alt="image-20221223222027964" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>还有nutui 等</p><p>要注意 组件库 分 pc端 移动端 基于vue的 基于react的</p><h2 id="从项目中总结的router使用"><a href="#从项目中总结的router使用" class="headerlink" title="从项目中总结的router使用"></a>从项目中总结的router使用</h2><h3 id="只要挂载了路由-非路由组件和路由组件都有-route属性"><a href="#只要挂载了路由-非路由组件和路由组件都有-route属性" class="headerlink" title="只要挂载了路由 非路由组件和路由组件都有$route属性"></a>只要挂载了路由 非路由组件和路由组件都有$route属性</h3><p>非路由组件存着$route是 一个 path 都是当前使用的路由路径</p><p>通过这一点 我们可以根据组件身上的$route属性的path等判断元素的显示隐藏</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224122040714.png" alt="image-20221224122040714" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>我们就可以通过路由源信息来判断非路由组件的显示隐藏</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224122309058.png" alt="image-20221224122309058" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224122345888.png" alt="image-20221224122345888" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="项目可以配置默认路由-也就是重定向"><a href="#项目可以配置默认路由-也就是重定向" class="headerlink" title="项目可以配置默认路由 也就是重定向"></a>项目可以配置默认路由 也就是重定向</h3><p>比如说</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">routes</span>: [</span><br><span class="line">	&#123; <span class="attr">name</span>: <span class="string">&quot;home&quot;</span>, <span class="attr">path</span>: <span class="string">&quot;/home&quot;</span>, <span class="attr">component</span>: <span class="title class_">Home</span> &#125;,</span><br><span class="line">	&#123; <span class="attr">name</span>: <span class="string">&quot;search&quot;</span>, <span class="attr">path</span>: <span class="string">&quot;/search&quot;</span>, <span class="attr">component</span>: <span class="title class_">Search</span> &#125;,</span><br><span class="line">	&#123; <span class="attr">name</span>: <span class="string">&quot;login&quot;</span>, <span class="attr">path</span>: <span class="string">&quot;/login&quot;</span>, <span class="attr">component</span>: <span class="title class_">Login</span> &#125;,</span><br><span class="line">	&#123; <span class="attr">name</span>: <span class="string">&quot;register&quot;</span>, <span class="attr">path</span>: <span class="string">&quot;/register&quot;</span>, <span class="attr">component</span>: <span class="title class_">Register</span> &#125;,</span><br><span class="line">       &#123;<span class="attr">path</span>:<span class="string">&#x27;/&#x27;</span> ,<span class="attr">redirect</span>:<span class="string">&#x27;/home&#x27;</span>&#125;</span><br><span class="line">],</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224015908108.png" alt="image-20221224015908108" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224020808214.png" alt="image-20221224020808214" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这里的其他业务逻辑 比如登录的跳转 我们在这之中要做很多业务才能跳转</p><h3 id="路由跳转方式有几种"><a href="#路由跳转方式有几种" class="headerlink" title="路由跳转方式有几种"></a>路由跳转方式有几种</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224122545406.png" alt="image-20221224122545406" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="路由传参-有几种写法？"><a href="#路由传参-有几种写法？" class="headerlink" title="路由传参 有几种写法？"></a>路由传参 有几种写法？</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224122638158.png" alt="image-20221224122638158" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="可以同时传递params-query参数"><a href="#可以同时传递params-query参数" class="headerlink" title="可以同时传递params query参数"></a>可以同时传递params query参数</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224142006842.png" alt="image-20221224142006842" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224142230423.png" alt="image-20221224142230423" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>但是记住有params参数就不要用path了 用name</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224144626143.png" alt="image-20221224144626143" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224144659465.png" alt="image-20221224144659465" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="路由懒加载"><a href="#路由懒加载" class="headerlink" title="路由懒加载"></a>路由懒加载</h2><p>当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。</p><p>Vue Router 支持开箱即用的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports">动态导入</a>，这意味着你可以用动态导入代替静态导入：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">// 将</span><br><span class="line">// import UserDetails from &#x27;./views/UserDetails.vue&#x27;</span><br><span class="line">// 替换成</span><br><span class="line">const UserDetails = () =&gt; import(&#x27;./views/UserDetails.vue&#x27;)</span><br><span class="line"></span><br><span class="line">const router = createRouter(&#123;</span><br><span class="line">  // ...</span><br><span class="line">  routes: [&#123; path: &#x27;/users/:id&#x27;, component: UserDetails &#125;],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><code>component</code> (和 <code>components</code>) 配置接收一个返回 Promise 组件的函数，Vue Router <strong>只会在第一次进入页面时才会获取这个函数</strong>，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const UserDetails = () =&gt;</span><br><span class="line">  Promise.resolve(&#123;</span><br><span class="line">    /* 组件定义 */</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure><p>一般来说，对所有的路由<strong>都使用动态导入</strong>是个好主意。</p><p>注意</p><p><strong>不要</strong>在路由中使用<a target="_blank" rel="noopener" href="https://v3.vuejs.org/guide/component-dynamic-async.html#async-components">异步组件</a>。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。</p><p>如果你使用的是 webpack 之类的打包器，它将自动从<a target="_blank" rel="noopener" href="https://webpack.js.org/guides/code-splitting/">代码分割</a>中受益。</p><p>如果你使用的是 Babel，你将需要添加 <a target="_blank" rel="noopener" href="https://babeljs.io/docs/plugins/syntax-dynamic-import/">syntax-dynamic-import</a> 插件，才能使 Babel 正确地解析语法。</p><p>上述官方文档就算是在将</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114190304790.png" alt="image-20230114190304790" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>在组件使用时会调用这个函数</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114190422507.png" alt="image-20230114190422507" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章 <span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/props%E6%8E%A5%E6%94%B6%E5%8F%82%E6%95%B0/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/">前端开发</a></div><h5><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/props%E6%8E%A5%E6%94%B6%E5%8F%82%E6%95%B0/" class="trm-anima-link">props接收参数</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/10/09</li><li>00:50</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/$attrs%E4%B8%8E$listener%20$children%20$parrent/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/">前端开发</a></div><h5><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/$attrs%E4%B8%8E$listener%20$children%20$parrent/" class="trm-anima-link">$attrs与$listener $children $parrent</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/10/09</li><li>00:50</li></ul></div></div></div></div><div class="trm-divider footer-divider"></div><footer class="trm-scroll-animation"><div class="trm-footer-item"><span>© 2023- 2023</span> <span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">不情的歌</span></div><div class="trm-footer-item">博客已萌萌哒运行 <span id="since" class="trm-accent-color"></span> 天</div><div class="trm-footer-item">当你累的时候你是在走上坡路</div></footer><script>function show_date_time(){var e=new Date("10/07/2023 15:00:00"),t=(new Date).getTime()-e.getTime(),i=Math.floor(t/864e5);since.innerHTML=i}show_date_time()</script></div></div></div></div></div><div id="post-toc" class="trm-post-toc"><div class="trm-post-toc-header">目录导航</div><div class="trm-post-toc-content"><ol class="trm-toc"><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#vue-router"><span class="trm-toc-number">1.</span> <span class="trm-toc-text">vue-router</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#简介"><span class="trm-toc-number">1.1.</span> <span class="trm-toc-text">简介</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#基本使用"><span class="trm-toc-number">1.2.</span> <span class="trm-toc-text">基本使用</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#注意点1-路由组件放的文件夹"><span class="trm-toc-number">1.2.1.</span> <span class="trm-toc-text">注意点1. 路由组件放的文件夹</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#注意点2-路由组件没被激活时是被销毁了而不是display-none了"><span class="trm-toc-number">1.2.2.</span> <span class="trm-toc-text">注意点2. 路由组件没被激活时是被销毁了而不是display:none了</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#嵌套（多级）路由"><span class="trm-toc-number">1.3.</span> <span class="trm-toc-text">嵌套（多级）路由</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由query传参"><span class="trm-toc-number">1.4.</span> <span class="trm-toc-text">路由query传参</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#字符串写法"><span class="trm-toc-number">1.4.1.</span> <span class="trm-toc-text">字符串写法</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#对象写法"><span class="trm-toc-number">1.4.2.</span> <span class="trm-toc-text">对象写法</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#命名路由"><span class="trm-toc-number">1.5.</span> <span class="trm-toc-text">命名路由</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由params参数"><span class="trm-toc-number">1.6.</span> <span class="trm-toc-text">路由params参数</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a class="trm-toc-link"><span class="trm-toc-number">1.6.1.</span> <span class="trm-toc-text"></span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#配置params可传可不传"><span class="trm-toc-number">1.6.2.</span> <span class="trm-toc-text">配置params可传可不传</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#params参数可传可不传-如果传的参数值是空串-如何解决"><span class="trm-toc-number">1.6.3.</span> <span class="trm-toc-text">params参数可传可不传 如果传的参数值是空串 如何解决</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由的props配置"><span class="trm-toc-number">1.7.</span> <span class="trm-toc-text">路由的props配置</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#router-link的repace属性"><span class="trm-toc-number">1.8.</span> <span class="trm-toc-text">router-link的repace属性</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#-1"><span class="trm-toc-number">1.8.1.</span> <span class="trm-toc-text"></span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#编程式路由导航（不用router-link）"><span class="trm-toc-number">1.9.</span> <span class="trm-toc-text">编程式路由导航（不用router-link）</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#push-和-replace重写解决跳转当前路由（参数不变）-多次执行抛出navigationDuplicated-警告"><span class="trm-toc-number">1.9.1.</span> <span class="trm-toc-text">push 和 replace重写解决跳转当前路由（参数不变） 多次执行抛出navigationDuplicated 警告</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#缓存路由组件"><span class="trm-toc-number">1.10.</span> <span class="trm-toc-text">缓存路由组件</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#-2"><span class="trm-toc-number">1.10.1.</span> <span class="trm-toc-text"></span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#新增的两个路由生命周期和-nextick生命周期钩子"><span class="trm-toc-number">1.11.</span> <span class="trm-toc-text">新增的两个路由生命周期和 nextick生命周期钩子</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由守卫"><span class="trm-toc-number">1.12.</span> <span class="trm-toc-text">路由守卫</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#前置全局路由守卫"><span class="trm-toc-number">1.12.1.</span> <span class="trm-toc-text">前置全局路由守卫</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#后置全局路由守卫"><span class="trm-toc-number">1.12.2.</span> <span class="trm-toc-text">后置全局路由守卫</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#独享路由守卫"><span class="trm-toc-number">1.12.3.</span> <span class="trm-toc-text">独享路由守卫</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#组件内路由守卫"><span class="trm-toc-number">1.12.4.</span> <span class="trm-toc-text">组件内路由守卫</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由history和hash模式"><span class="trm-toc-number">1.13.</span> <span class="trm-toc-text">路由history和hash模式</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#更改vue-hash-和history模式"><span class="trm-toc-number">1.13.1.</span> <span class="trm-toc-text">更改vue hash 和history模式</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#node解决history模式刷新404"><span class="trm-toc-number">1.13.2.</span> <span class="trm-toc-text">node解决history模式刷新404</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#ui组件库"><span class="trm-toc-number">1.14.</span> <span class="trm-toc-text">ui组件库</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#从项目中总结的router使用"><span class="trm-toc-number">1.15.</span> <span class="trm-toc-text">从项目中总结的router使用</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#只要挂载了路由-非路由组件和路由组件都有-route属性"><span class="trm-toc-number">1.15.1.</span> <span class="trm-toc-text">只要挂载了路由 非路由组件和路由组件都有$route属性</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#项目可以配置默认路由-也就是重定向"><span class="trm-toc-number">1.15.2.</span> <span class="trm-toc-text">项目可以配置默认路由 也就是重定向</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#路由跳转方式有几种"><span class="trm-toc-number">1.15.3.</span> <span class="trm-toc-text">路由跳转方式有几种</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#路由传参-有几种写法？"><span class="trm-toc-number">1.15.4.</span> <span class="trm-toc-text">路由传参 有几种写法？</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#可以同时传递params-query参数"><span class="trm-toc-number">1.15.5.</span> <span class="trm-toc-text">可以同时传递params query参数</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由懒加载"><span class="trm-toc-number">1.16.</span> <span class="trm-toc-text">路由懒加载</span></a></li></ol></li></ol></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn post-toc-btn" data-title="目录"><i class="iconfont fas fa-th-list"></i></div><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div class="trm-fixed-btn hidden-md" data-title="单栏和双栏切换" onclick="asyncFun.switchSingleColumn()"><i class="iconfont fas fa-arrows-alt-h"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><script src="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="/xujianhu/js/plugins/typing.js?v=2.1.2"></script><script id="async-script" src="/xujianhu/js/main.js?v=2.1.2"></script><script src="/xujianhu/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>